<template>
	<view class="course-container">
		<!-- 顶部背景图 -->
		<view class="top-bg">
			<image class="bg-img" src="/static/trainer_s.png" mode="aspectFill" />
		</view>

		<!-- 课程定制模块 -->
		<view class="custom-section">
			<view class="custom-title-row">
				<text class="custom-title">课程定制</text>
				<image class="custom-title-img" src="/static/trainer_z.png" />
			</view>
			<text class="custom-desc">青少年体适能 · 单反击球 · 竞技提升 · PTR认证教练</text>
		</view>

		<!-- 课程展示 -->
		<view class="course-list">
			<view class="course-item" v-for="course in courseList" :key="course.id" @tap="goToDetail(course.id)">
				<image class="course-img" :src="$xyfun.image(course.poster)" />
				<view class="course-info">
					<view class="course-title">{{ course.title }}</view>
					<view class="course-desc">{{ course.reservation_method || '下单后联系客服-预约人工排课' }}</view>
					<view class="course-bottom-row">
						<text class="course-price">￥{{ course.price }}</text>
						<button class="buy-btn" @tap.stop="goToDetail(course.id)">购买</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 灰色分割线 -->
		<view class="divider"></view>

		<!-- 专业教练 -->
		<view class="trainer-title">专业教练</view>
		<view class="trainer-list">
			<view class="trainer-card" v-for="coach in coachList" :key="coach.id" @tap="goToTrainer(coach.id)">
				<image class="trainer-avatar" :src="$xyfun.image(coach.avatar)" />
				<view class="trainer-info">
					<view class="trainer-name">{{ coach.name }}</view>
					<view class="trainer-desc">{{ coach.description }}</view>
				</view>
				<image class="trainer-arrow" src="/static/trainer_t.png" />
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				css: {},
				store_id: 0,
				courseList: [],
				coachList: [],
				isLoading: true
			};
		},
		computed: {
			...mapState(['common'])
		},
		onLoad() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.loadData();
		},
		methods: {
			loadData() {
				this.$xyfun.storeId().then((store_id) => {
					this.store_id = store_id;

					// 获取课程列表
					this.$api.post({
						url: '/private_session/courseList',
						data: {
							store_id: store_id
						},
						success: res => {
							this.courseList = res || [];
						}
					});

					// 获取教练列表
					this.$api.post({
						url: '/private_session/coachList',
						data: {
							store_id: store_id
						},
						success: res => {
							this.coachList = res || [];
							this.isLoading = false;
						}
					});
				});
			},

			goToDetail(courseId) {
				uni.navigateTo({
					url: `/pages/course/detail?id=${courseId}`
				});
			},

			goToTrainer(coachId) {
				uni.navigateTo({
					url: `/pages/course/trainer?id=${coachId}`
				});
			}
		}
	}
</script>


<style lang="scss" scoped>
	.course-container {
		background: #fff;
		min-height: 90vh;
		padding-bottom: 40rpx;
	}

	.top-bg {
		position: relative;
		width: 100vw;
		height: 550rpx;

		.bg-img {
			width: 100vw;
			height: 490rpx;
			display: block;
		}

		.back-btn {
			position: absolute;
			left: 24rpx;
			top: 32rpx;
			width: 48rpx;
			height: 48rpx;
			z-index: 2;
		}
	}

	.custom-section {
		background: #F4F4F4;
		border-top-left-radius: 32rpx;
		border-top-right-radius: 32rpx;
		margin-top: -85rpx;
		margin-bottom: 10rpx;
		padding: 40rpx 32rpx 32rpx 32rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		z-index: 1;

		.custom-title-row {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			margin-top: -10rpx;

			.custom-title {
				font-size: 40rpx;
				font-weight: bold;
				color: #222;
				margin-right: 16rpx;
			}

			.custom-title-img {
				width: 140rpx;
				height: 40rpx;
			}
		}

		.custom-desc {
			font-size: 30rpx;
			color: #000;
		}
	}

	.course-list {
		display: flex;
		flex-direction: column;
		gap: 32rpx;
		padding: 0 32rpx;
		margin-bottom: 32rpx;

		.course-item {
			display: flex;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
			overflow: hidden;
			align-items: center;
			padding: 0rpx 0;

			.course-img {
				width: 200rpx;
				height: 130rpx;
				border-radius: 10rpx;
				margin: 0 20rpx 0 0;
				flex-shrink: 0;
			}

			.course-info {
				flex: 1;
				display: flex;
				flex-direction: column;

				.course-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #222;
					margin-bottom: 6rpx;
				}

				.course-desc {
					font-size: 24rpx;
					color: #A5A5A5;
					margin-bottom: 12rpx;
				}

				.course-bottom-row {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.course-price {
						color: #FE5A35;
						font-size: 30rpx;
						font-weight: bold;
					}

					.buy-btn {
						background: #FE5A35;
						color: #fff;
						font-size: 28rpx;
						border-radius: 32rpx;
						padding: 0 40rpx;
						height: 60rpx;
						line-height: 60rpx;
						border: none;
						margin-right: 0;
					}
				}
			}
		}
	}

	.divider {
		width: 100vw;
		height: 1rpx;
		background: #F4F4F4;
		margin: 32rpx 0;
	}

	.trainer-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #222;
		margin: 32rpx 0 24rpx 32rpx;
	}

	.trainer-list {
		display: flex;
		flex-direction: column;
		gap: 28rpx;
		padding: 0 32rpx;

		.trainer-card {
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
			padding: 24rpx 20rpx;
			border: 2rpx solid #E5E5E5;

			/* ✅ 添加边框颜色 */
			.trainer-avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 24rpx;
				flex-shrink: 0;
			}

			.trainer-info {
				flex: 1;
				display: flex;
				flex-direction: column;

				.trainer-name {
					font-size: 35rpx;
					font-weight: bold;
					color: #222;
					margin-bottom: 8rpx;
				}

				.trainer-desc {
					font-size: 24rpx;
					color: #A5A5A5;
				}
			}

			.trainer-arrow {
				width: 16rpx;
				height: 26rpx;
				margin-left: 16rpx;
				flex-shrink: 0;
			}
		}
	}
</style>